<template>
  <Modal v-model="show" title="分配根组织机构" >
    <Transfer class="transfer"
              :data="data"
              :target-keys="targetKeys"
              :list-style="listStyle"
              :titles="['未分配机构', '已分配机构']"
              filterable
              :filter-method="filterMethod"
              @on-change="handleChange"></Transfer>
    <template #footer>
      <Button style="margin-right: 8px" @click="show = false">关闭</Button>
      <Button type="primary"  @click="handleSave">保存</Button>
    </template>
  </Modal>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  props: {
    modelValue: {type: Boolean, required: true},
    positionId: {type: Number, required: true} ,
  },
  watch: {
    positionId:function (newVal) {
       // 根据 职务ID , 查询对应的机构信息
      console.log("职务ID = " + newVal);
    }
  },
  data() {
    return {
      data: [
        {key: 1, label: "奇酷网络科技有限公司"},
        {key: 2, label: "结善缘有限公司"},
        {key: 3, label: "点兔娱乐有限公司", disabled: true},

      ],
      targetKeys: [],
      listStyle: {
        height: '500px',
      }
    }
  },
  computed: {
    show: {
      get() {
        return this.modelValue ;
      },
      set(val) {
        this.$emit("update:model-value", val);
      }
    }
  },
  methods: {
    handleChange(newTargetKeys) {
      this.targetKeys = newTargetKeys;
    },
    filterMethod(data, query) {
      return data.label.indexOf(query) > -1;
    },
    handleSave(){
      // 保存数据
      console.log("保存数据");
    }
  }
})
</script>

<style>
.transfer .ivu-transfer {
  text-align: center;
}

.transfer .ivu-transfer-list-footer {
  border: none;
}

.transfer .ivu-transfer-list-content {
  text-align: left;
}
</style>